<?php
require_once 'layout.php';

$title = "联系我们";
$currentPage = "contact";

$content = '
<section class="hero" style="padding: 60px 0;">
    <div class="container">
        <div class="hero-content">
            <h1>联系我们</h1>
            <p>专业的SSL证书顾问团队随时为您服务，7×24小时技术支持，快速响应您的需求</p>
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="contact-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;">
            <!-- 联系方式 -->
            <div class="contact-info">
                <h2>联系方式</h2>
                <p style="color: var(--text-light); margin-bottom: 40px;">我们提供多种联系方式，选择最适合您的方式与我们沟通</p>
                
                <div class="contact-methods">
                    <div class="contact-method" style="display: flex; align-items: center; margin-bottom: 30px;">
                        <div class="contact-icon" style="width: 50px; height: 50px; background: var(--primary-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px;">
                            <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95C18.05 21.45 22 17.19 22 12z" fill="white"/>
                            </svg>
                        </div>
                        <div>
                            <h4>在线客服</h4>
                            <p style="color: var(--text-light); margin: 5px 0;">7×24小时在线服务</p>
                            <p style="color: var(--primary-blue); font-weight: 500;">点击右下角客服按钮</p>
                        </div>
                    </div>
                    
                    <div class="contact-method" style="display: flex; align-items: center; margin-bottom: 30px;">
                        <div class="contact-icon" style="width: 50px; height: 50px; background: var(--accent-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px;">
                            <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.479 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.095 3.2 5.076 4.487.709.306 1.262.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z" fill="white"/>
                            </svg>
                        </div>
                        <div>
                            <h4>微信客服</h4>
                            <p style="color: var(--text-light); margin: 5px 0;">扫码添加技术顾问</p>
                            <p style="color: var(--accent-green); font-weight: 500;">微信号: cnssl-support</p>
                        </div>
                    </div>
                    
                    <div class="contact-method" style="display: flex; align-items: center; margin-bottom: 30px;">
                        <div class="contact-icon" style="width: 50px; height: 50px; background: #00a1d6; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px;">
                            <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M21.2,6.1c0.7,0.4,1.2,1.1,1.3,1.9v8c-0.1,0.8-0.6,1.5-1.3,1.9L12,22.1c-0.7,0.4-1.5,0.4-2.2,0l-9.2-4.2 c-0.7-0.4-1.2-1.1-1.3-1.9V8c0.1-0.8,0.6-1.5,1.3-1.9L10.8,1.9c0.7-0.4,1.5-0.4,2.2,0L21.2,6.1z M12,2.5 C11.8,2.4,11.5,2.4,11.3,2.5L2.1,6.7C1.9,6.8,1.8,7,1.7,7.2c0,0.2,0.1,0.4,0.3,0.5l9.2,4.2c0.2,0.1,0.5,0.1,0.7,0l9.2-4.2 c0.2-0.1,0.3-0.3,0.3-0.5c0-0.2-0.1-0.4-0.3-0.5L12,2.5z" fill="white"/>
                            </svg>
                        </div>
                        <div>
                            <h4>QQ客服</h4>
                            <p style="color: var(--text-light); margin: 5px 0;">工作时间快速响应</p>
                            <p style="color: #00a1d6; font-weight: 500;">QQ群: 123456789</p>
                        </div>
                    </div>
                    
                    <div class="contact-method" style="display: flex; align-items: center; margin-bottom: 30px;">
                        <div class="contact-icon" style="width: 50px; height: 50px; background: #f59e0b; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px;">
                            <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M6.62,10.79C8.06,13.62,10.38,15.94,13.21,17.38L15.41,15.18C15.69,14.9,16.08,14.82,16.43,14.93C17.55,15.3,18.75,15.5,20,15.5C20.55,15.5,21,15.95,21,16.5V20C21,20.55,20.55,21,20,21C10.61,21,3,13.39,3,4C3,3.45,3.45,3,4,3H7.5C8.05,3,8.5,3.45,8.5,4C8.5,5.25,8.7,6.45,9.07,7.57C9.18,7.92,9.1,8.31,8.82,8.59L6.62,10.79Z" fill="white"/>
                            </svg>
                        </div>
                        <div>
                            <h4>电话支持</h4>
                            <p style="color: var(--text-light); margin: 5px 0;">工作日 9:00-18:00</p>
                            <p style="color: #f59e0b; font-weight: 500;">400-888-8888</p>
                        </div>
                    </div>
                    
                    <div class="contact-method" style="display: flex; align-items: center; margin-bottom: 30px;">
                        <div class="contact-icon" style="width: 50px; height: 50px; background: #ef4444; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px;">
                            <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M20,4H4C2.9,4,2.01,4.9,2.01,6L2,18C2,19.1,2.9,20,4,20H20C21.1,20,22,19.1,22,18V6C22,4.9,21.1,4,20,4ZM20,8L12,13L4,8V6L12,11L20,6V8Z" fill="white"/>
                            </svg>
                        </div>
                        <div>
                            <h4>邮箱支持</h4>
                            <p style="color: var(--text-light); margin: 5px 0;">24小时内回复</p>
                            <p style="color: #ef4444; font-weight: 500;">support@cnssl.com</p>
                        </div>
                    </div>
                </div>
                
                <div class="office-info" style="margin-top: 50px; padding: 30px; background: var(--bg-light); border-radius: 12px;">
                    <h3>公司信息</h3>
                    <div style="margin-top: 20px;">
                        <p><strong>公司名称：</strong>CNSSL科技有限公司</p>
                        <p><strong>办公地址：</strong>北京市海淀区中关村软件园</p>
                        <p><strong>邮政编码：</strong>100080</p>
                        <p><strong>营业时间：</strong>周一至周五 9:00-18:00</p>
                    </div>
                </div>
            </div>
            
            <!-- 联系表单 -->
            <div class="contact-form-section">
                <h2>发送消息</h2>
                <p style="color: var(--text-light); margin-bottom: 40px;">填写下面的表单，我们会尽快与您联系</p>
                
                <form class="contact-form" style="background: white; padding: 40px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
                    <div class="form-group" style="margin-bottom: 25px;">
                        <label for="name" style="display: block; margin-bottom: 8px; font-weight: 500; color: var(--text-dark);">姓名 *</label>
                        <input type="text" id="name" name="name" required 
                               style="width: 100%; padding: 12px; border: 1px solid var(--border-gray); border-radius: 6px; font-size: 16px;" 
                               placeholder="请输入您的姓名">
                    </div>
                    
                    <div class="form-group" style="margin-bottom: 25px;">
                        <label for="email" style="display: block; margin-bottom: 8px; font-weight: 500; color: var(--text-dark);">邮箱 *</label>
                        <input type="email" id="email" name="email" required 
                               style="width: 100%; padding: 12px; border: 1px solid var(--border-gray); border-radius: 6px; font-size: 16px;" 
                               placeholder="请输入您的邮箱地址">
                    </div>
                    
                    <div class="form-group" style="margin-bottom: 25px;">
                        <label for="phone" style="display: block; margin-bottom: 8px; font-weight: 500; color: var(--text-dark);">电话</label>
                        <input type="tel" id="phone" name="phone" 
                               style="width: 100%; padding: 12px; border: 1px solid var(--border-gray); border-radius: 6px; font-size: 16px;" 
                               placeholder="请输入您的电话号码">
                    </div>
                    
                    <div class="form-group" style="margin-bottom: 25px;">
                        <label for="company" style="display: block; margin-bottom: 8px; font-weight: 500; color: var(--text-dark);">公司</label>
                        <input type="text" id="company" name="company" 
                               style="width: 100%; padding: 12px; border: 1px solid var(--border-gray); border-radius: 6px; font-size: 16px;" 
                               placeholder="请输入您的公司名称">
                    </div>
                    
                    <div class="form-group" style="margin-bottom: 25px;">
                        <label for="subject" style="display: block; margin-bottom: 8px; font-weight: 500; color: var(--text-dark);">咨询类型 *</label>
                        <select id="subject" name="subject" required 
                                style="width: 100%; padding: 12px; border: 1px solid var(--border-gray); border-radius: 6px; font-size: 16px; background: white;">
                            <option value="">请选择咨询类型</option>
                            <option value="product">产品咨询</option>
                            <option value="technical">技术支持</option>
                            <option value="sales">销售咨询</option>
                            <option value="partnership">合作洽谈</option>
                            <option value="other">其他问题</option>
                        </select>
                    </div>
                    
                    <div class="form-group" style="margin-bottom: 30px;">
                        <label for="message" style="display: block; margin-bottom: 8px; font-weight: 500; color: var(--text-dark);">消息内容 *</label>
                        <textarea id="message" name="message" rows="6" required 
                                  style="width: 100%; padding: 12px; border: 1px solid var(--border-gray); border-radius: 6px; font-size: 16px; resize: vertical;" 
                                  placeholder="请详细描述您的问题或需求..."></textarea>
                    </div>
                    
                    <button type="submit" class="btn btn-primary" style="width: 100%; padding: 15px;">
                        发送消息
                    </button>
                </form>
            </div>
        </div>
        
        <!-- FAQ 部分 -->
        <div class="faq-section" style="margin-top: 80px;">
            <h2 class="section-title">常见问题</h2>
            <div class="faq-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; margin-top: 50px;">
                <div class="faq-item" style="background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
                    <h4 style="color: var(--primary-blue); margin-bottom: 15px;">SSL证书有什么作用？</h4>
                    <p style="color: var(--text-light);">SSL证书可以加密网站数据传输，保护用户隐私，提升网站安全性，增强用户信任，同时对SEO排名也有积极影响。</p>
                </div>
                
                <div class="faq-item" style="background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
                    <h4 style="color: var(--primary-blue); margin-bottom: 15px;">如何选择合适的SSL证书？</h4>
                    <p style="color: var(--text-light);">根据网站类型选择：个人网站选DV证书，企业网站选OV证书，电商平台选EV证书。考虑域名数量和预算选择单域名、通配符或多域名证书。</p>
                </div>
                
                <div class="faq-item" style="background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
                    <h4 style="color: var(--primary-blue); margin-bottom: 15px;">SSL证书多久可以签发？</h4>
                    <p style="color: var(--text-light);">DV证书通常5-10分钟内签发，OV证书需要1-3个工作日，EV证书需要5-7个工作日。具体时间取决于验证流程的复杂度。</p>
                </div>
                
                <div class="faq-item" style="background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
                    <h4 style="color: var(--primary-blue); margin-bottom: 15px;">支持哪些付款方式？</h4>
                    <p style="color: var(--text-light);">我们支持支付宝、微信支付、银行转账、信用卡等多种付款方式。企业用户还可以选择月付、季付、年付等灵活的付费方式。</p>
                </div>
                
                <div class="faq-item" style="background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
                    <h4 style="color: var(--primary-blue); margin-bottom: 15px;">提供技术支持吗？</h4>
                    <p style="color: var(--text-light);">是的，我们提供7×24小时技术支持服务，包括证书安装指导、故障排查、自动化配置等。您可以通过在线客服、微信、QQ、电话等多种方式联系我们。</p>
                </div>
                
                <div class="faq-item" style="background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
                    <h4 style="color: var(--primary-blue); margin-bottom: 15px;">证书可以退款吗？</h4>
                    <p style="color: var(--text-light);">未签发的订单可以申请全额退款，已签发的证书在30天内如有质量问题可申请退款。具体退款政策请查看服务条款或联系客服。</p>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    
    .faq-grid {
        grid-template-columns: 1fr !important;
    }
    
    .contact-form {
        padding: 30px 20px !important;
    }
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.1);
}

.contact-form button:hover {
    background: var(--secondary-blue);
    transform: translateY(-1px);
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // 表单提交处理
    const form = document.querySelector(".contact-form");
    if (form) {
        form.addEventListener("submit", function(e) {
            e.preventDefault();
            
            // 这里可以添加表单验证和提交逻辑
            const formData = new FormData(form);
            const data = Object.fromEntries(formData.entries());
            
            // 模拟表单提交
            console.log("表单数据:", data);
            
            // 显示成功消息
            alert("消息已发送！我们会尽快与您联系。");
            form.reset();
        });
    }
});
</script>
';

renderPage($title, $content, $currentPage);
?>